<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex-shrink防止收缩</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .main {
      width: 600px;
      margin: 0 auto;
      border: 1px solid #000;
	    padding: 10px;
    }
    .flex-wrapper {
      display: flex;
      height: 300px;
      border: 2px solid #039145;
      padding: 10px;
	    margin: 10px 0;
	    gap: 5px;
    }
    .item {
	    height: 100%;
	    flex-basis: 50px;
	    background-color: #ccc;
	    border: 1px solid #000;
    }
    .margin-box {
	    background-color: yellow;
    }
    .form-content {
      display: flex;
    }
    .form-item {
	    flex: 1 1;
    }
    ul {
	    display: flex;
	    gap: 10px;
	    height: 300px;
    }
    li {
	    list-style: none;
    }
    li a {
	    text-decoration: none;
	    font-size: 20px;
	    font-weight: bold;
	    color: #000;
    }
    li.logo {
	    margin-right: auto;
    }
  </style>
</head>
<body style="display: flex;">
  <div class="main">
    <h2>gap+自动间距</h2>
    <div class="flex-wrapper" id="box">
      <div class="item margin-box"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>

    <form action="" class="form-content">
	    <div class="form-item">
		    <h4>margin-left</h4>
		    <label>
			    <input type="radio" name="marginLeft" value="0" checked />0（默认值）
		    </label>
		    <label>
			    <input type="radio" name="marginLeft" value="auto" />auto
		    </label>
	    </div>

      <div class="form-item">
	      <h4>margin-right</h4>
	      <label>
		      <input type="radio" name="marginRight" value="0" checked />0（默认值）
	      </label>
	      <label>
		      <input type="radio" name="marginRight" value="auto" />auto
	      </label>
      </div>
    </form>
  </div>

  <div class="main">
	  <h2 style="border-bottom: 1px solid #000;margin-bottom: 20px;">实际应用,logo增加样式margin-right:auto</h2>
	  <ul id="box2">
		  <li class="logo">
			  <a href="">
				  公司logo
			  </a>
		  </li>
		  <li>
			  <a href="">
				  任务
			  </a>
		  </li>
		  <li>
			  <a href="">
				  我的
			  </a>
		  </li>
	  </ul>
	  <form action="">
		  <h4>调整宽度</h4>
		  <input type="range" min="200" max="550" value="560" id="range" style="width: 500px;"/>
		  <span id="rangeValue">560px</span>
	  </form>
  </div>

  <script>
    window.onload = function () {
			const boxDom = document.querySelector('.margin-box');
			const marginLeftDom = document.querySelectorAll('input[name="marginLeft"]');
			const marginRightDom = document.querySelectorAll('input[name="marginRight"]');

	    marginLeftDom.forEach(radio => {
				radio.addEventListener('change', function () {
					boxDom.style.marginLeft = this.value;
				})
	    })
	    marginRightDom.forEach(radio => {
		    radio.addEventListener('change', function () {
			    boxDom.style.marginRight = this.value;
		    })
	    })

	    const box2 = document.getElementById('box2');
			const range = document.getElementById('range');
			const rangeValue = document.getElementById('rangeValue');
			range.addEventListener('input', function () {
				box2.style.width = this.value + 'px';
				rangeValue.innerText = this.value + 'px';
			})
    }
  </script>
</body>
</html>
